<template>
  <div class="login">
    <!-- 图片部分 -->
    <div class="box1">
      <img src="../../public/img/login.jpg">
    </div>
    <!-- 登陆部分 -->
    <div class="box2">
      <div class="input-control has-icon-left">
        <input id="inputAccountExample1" type="text" class="form-control" placeholder="用户名" v-model="username">
        <label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
      </div>
      <div class="input-control has-icon-left has-icon-right">
        <input id="inputEmailExample1" type="password" class="form-control" placeholder="密码" v-model="password">
        <label for="inputEmailExample1" class="input-control-icon-left"><i class="icon icon-envelope "></i></label>
        <label for="inputEmailExample1" class="input-control-icon-right"><i class="icon icon-check"></i></label>
      </div>
      <select class="form-control" v-model="identity">
        <option>选择身份</option>
        <option>老板</option>
        <option>员工</option>
      </select>
      <button class="btn btn-success" @click="login">登录</button>
      <ul class="box2-list">
        <li @click="jump('register')">免费注册</li>
        <li>找回密码</li>
      </ul>
    </div>
    <!-- 底部商标 -->
    <div class="box3">
      <p>版权所有 湖北孝感</p>
      <p>客服电话 23156731678</p>
    </div>
  </div>

</template>

<script>
  //引入事件总线bus
  export default {
    name: "login",
    data() {
      return {
        username: "",
        password: "",
        identity: "",
        listBoss: [],
        listEmployee: []
      }
    },
    methods: {
      login() {
        if (this.identity == "老板") {
          for (var i = 0; i < this.listBoss.length; i++) {
            if (this.username == this.listBoss[i].bossName && this.password == this.listBoss[i].bossPassword) {
              this.$router.push({
                name: "main1"
              }).catch(err => err)
            }
          }
        } else if (this.identity == "员工") {
          for(var i=0;i<this.listEmployee.length;i++){
            if(this.username==this.listEmployee[i].employeeName&&this.password==this.listEmployee[i].employeePassword)
            {
              this.$router.push({
                name: "employee1"
              }).catch(err => err)
            }
          }
        } else {
          alert("请选择身份")
        }
        var obj = {
          username: this.username,
          flag: true
        }
        //window对象  单例
        window.localStorage.setItem("logined", JSON.stringify(obj))
      },
      // 跳转注册
      jump(index){
        this.$router.push({
          name:index
        }).catch(err=>err)
      }
    },
    created() {
      // 配置代理  取本地服务器的数据
      var url1 = this.HOST + "listBoss"
      var url2 = this.HOST + "listEmployee"
      this.$axios.get(url1).then(
        res => {
          this.listBoss = res.data.data
        }, err => {
          console.log(err)
        })
      // 员工信息
      this.$axios.get(url2).then(
        res => {
          this.listEmployee = res.data.data
        }, err => {
          console.log(err)
        })
    },
  }
</script>

<style scoped="scoped">
  .login {
    font-size: 10px;
  }

  p {
    text-align: center;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.5);
  }

  img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    border: none;
  }

  .box2 {
    width: 60%;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 20px;
  }



  .box2 button {
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 20px;
  }

  .box2-list {
    display: flex;
    justify-content: center;
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 20px;
  }

  .box2-list li {
    width: 50%;
    color: rgba(0, 0, 0, 0.5);
    font-size: 8px;
  }

  .box3 {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
